<script setup lang="ts" name="B5RefObject">
import { ref } from "vue";

const car = ref({ brand: "别墨我", price: 99 });
const games = ref([
  { id: "g-1", name: "流星蝴蝶剑" },
  { id: "g-2", name: "自由幻想" },
  { id: "g-3", name: "我的世界" },
]);

const changeCarPrice = () => {
  car.value.price += 1;
};

const change1stGame = () => {
  games.value[0].name = "半条命";
};
</script>

<template>
  <section class="bg-blue-50 p-3">
    <div>这台{{ car.brand }}车，价值{{ car.price }}个W。</div>
    <div class="my-3">
      <button class="border px-2 py-0.5 bg-gray-100 hover:bg-gray-50" @click="changeCarPrice">
        改价
      </button>
    </div>
  </section>
  <section class="my-3 bg-cyan-50 p-3">
    <div>游戏列表：</div>
    <ul class="border border-dotted p-3 my-3 bg-yellow-50">
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <div>
      <button class="border px-2 py-0.5 bg-gray-100 hover:bg-gray-50" @click="change1stGame">
        改第一游戏
      </button>
    </div>
  </section>
</template>
